<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI伪类</title>
    <style type="text/css">
        #t1:hover{
            background-color: #00FF00;
        }
        /*不使用focus时 可以看到active*/
        #t1:active{
            background-color: #0000ff;
        }
        #t1:focus{
            background-color: red;
        }
        #t2:enabled{
            background-color: #00ff00;
        }
        #t3:disabled{
            background-color: #b4b4b4;
        }
        input[id^="c"]{
            width: 15px;
            height: 15px;
        }
        #c1:checked{
            outline: solid 2px #ff0000;
        }
        input[type="checkbox"]:default{
            outline: solid 2px #ff0000;
        }
        input[type="radio"]:indeterminate{
            outline: solid 2px #0000ff;
        }
        #t4:read-write{
            background-color: #7014c6;
        }
        #t5:read-only{
            background-color: #13b8ba;
        }
        p::selection{
            background-color: red;
        }
        input[type="email"]:valid{
            background-color: red;
        }
        input[type="email"]:invalid{
            background-color: #bbbbbb;
        }
        input[type="text"]:required{
            border-color:red ;
        }
        input[type="text"]:optional{
            border-color: #00ff00;
        }
        input[type="number"]:in-range{
            background-color: white;
        }
        input[type="number"]:out-of-range{
            background-color: red;
        }
    </style>
</head>
<body>
<h1>UI 伪类</h1>
<form action="" method="get">
    <div>
        <label>鼠标移上去文本框背景色变绿色，单机按住不放背景色变蓝色，获得焦点变红色
            <input type="text" id="t1" name="t1"></label>
    </div>
    <div>
        <label>文本框可用时背景色变绿色<input type="text" id="t2" name="t2"></label>
    </div>
    <div>
        <label>文本框不可用时背景色变灰色<input type="text" id="t3" name="t3" disabled></label>
    </div>
    <div>
        <label>选中<input type="checkbox" id="c1" name="c1"></label>
    </div>
    <div>
        <label>默认选中<input type="checkbox" id="c2" name="c2" checked></label>
    </div>
    <div>
        <label>都没选中<input type="radio" id="radio" name="radio" value="male">男
            <input type="radio" name="radio" value="female">女</label>
    </div>
    <div>
        <label>文本框可读写<input type="text" id="t4" name="t4"></label>
    </div>
    <div>
        <label>文本框只读<input type="text" id="t5" name="t5" readonly></label>
    </div>
    <p>选择的文字会变成红色</p>
    <div>
        <label>输入符合email的格式字符<input type="email" required></label>
    </div>
    <div>
        <label>输入任意字符<input type="text" required></label>
    </div>
    <div>
        <label>输入1-100以内的数值<input type="number" min="1" max="100"></label>
    </div>
</form>
</body>
</html>